/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState, useCallback, useEffect } from "react";
import { Button, Modal, Form, InputNumber, Row, Col } from "antd";
import styles from "./index.less";
import Citys_picker from "./Citys_picker";

const valuesKey = ["provices", "f_kg", "f_weight", "s_kg", "s_weight"];

const FormItem = Form.Item;
const Area = props => {
  const {
    selectted,
    data,
    form: { getFieldDecorator, validateFieldsAndScroll, setFieldsValue },
  } = props;
  // 数字输入框通用属性
  const numberProps = { precision: 2, min: 0.01, max: 200 };
  // 面单费与附加费是否必填的默认状态
  const [visible, updateVisible] = useState(false);
  // 选中的省份过滤状态管理
  const [selecttedFilter, updateSelectted] = useState([]);

  useEffect(
    () => {
      data && handleOpen();
    },
    [data]
  );

  // 开启弹窗
  const handleOpen = useCallback(
    () => {
      // 更新当前选中的省份：如果是添加，直接使用父级传入；编辑时则应过滤当前省份
      const { provices } = data || {};
      updateSelectted(
        selectted.filter(item => !provices || !provices.some(itemm => itemm.id == item.id))
      );
      updateVisible(true);
      valuesKey.map(item => {
        if (data && data[item]) {
          setFieldsValue({
            [item]: item === "provices" ? data[item] || [] : data[item],
          });
        }
      });
    },
    [selectted, data]
  );
  // 关闭弹窗
  const handleClose = useCallback(() => {
    updateVisible(false);
    setFieldsValue({ provices: [] });
    props.onClose();
  }, []);

  // 弹窗确认
  const handleOk = useCallback(
    () => {
      validateFieldsAndScroll((error, values) => {
        if (!error) {
          const { id = `new-${new Date().getTime()}` } = data || {};
          const { ...rest } = values;
          props.onChange({
            id,
            ...rest,
          });
          handleClose();
        }
      });
    },
    [validateFieldsAndScroll, selecttedFilter, data]
  );

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  return (
    <>
      <Button type="primary" ghost size="small" onClick={handleOpen}>
        添加
      </Button>
      <Modal
        title="添加区域报价"
        centered
        visible={visible}
        onCancel={handleClose}
        maskClosable
        onOk={handleOk}
        destroyOnClose
        className={styles.modal_}
      >
        <Form {...formItemLayout}>
          <FormItem label="发往地区">
            {getFieldDecorator("provices", {
              rules: [{ type: "array", required: true, message: "请选择发往地区" }],
            })(<Citys_picker selectted={selecttedFilter} />)}
          </FormItem>
          <FormItem label="首重">
            {getFieldDecorator("f_kg", {
              rules: [{ required: true, message: "请输入首重重量" }],
            })(
              <InputNumber placeholder="请输入首重重量" style={{ width: "70%" }} {...numberProps} />
            )}
            <span style={{ margin: "0 12px" }}>kg</span>
          </FormItem>
          <FormItem label="首重价格">
            {getFieldDecorator("f_weight", {
              rules: [{ required: true, message: "请输入首重价格" }],
            })(
              <InputNumber placeholder="请输入首重价格" style={{ width: "70%" }} {...numberProps} />
            )}
            <span style={{ margin: "0 12px" }}>元</span>
          </FormItem>
          <FormItem label={"续重价格"} required={true} >
            <Row type="flex">
              <Col span={7}>
                <FormItem>
                  {getFieldDecorator("s_weight", {
                    rules: [{ required: true, message: "请输入续重价格" }],
                  })(
                    <InputNumber
                      placeholder="请输入续重价格"
                      style={{ width: "100%" }}
                      {...numberProps}
                    />
                  )}
                </FormItem>
              </Col>
              <Col span={3}>
                <span className="kb-unit" style={{ margin: "0 12px" }}>
                  元/
                </span>
              </Col>
              <Col span={7}>
                <FormItem>
                  {getFieldDecorator("s_kg", {
                    rules: [{ required: true, message: "请输入续重重量" }],
                  })(
                    <InputNumber
                      placeholder="请输入续重重量"
                      style={{ width: "100%" }}
                      precision={2}
                      min={1}
                    />
                  )}
                </FormItem>
              </Col>
              <Col span={3}>
                <span style={{ margin: "0 12px" }}>kg</span>
              </Col>
            </Row>
          </FormItem>
        </Form>
      </Modal>
    </>
  );
};

Area.defaultProps = {
  data: null,
  onClose: () => {},
  onChange: () => {},
};

export default Form.create()(Area);
